
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>手风琴案例</title>

    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        img{
            display: block;
        }
        .king{
            width:725px;
            margin: 10px auto;
            padding: 6px;
            /*border: 1px solid red;*/
            height:70px;
            background-color: #143757;
            border-radius: 5px;
        }

        ul li{
            list-style: none;
            float: left;
            width:69px;
            height: 69px;
            margin-right: 10px;
        }
        .small{
            width:69px;
            height: 69px;
            border-radius: 5px;
        }
        .big{
            width: 224px;
            height: 69px;

        }
    </style>

</head>

<body>
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
    var imgs = $(".king li img");
    //给每个图片标签添加大小图片属性
    for (let i = 0; i < imgs.length; i++) {
        let src=imgs[i].src;
        let index = src.lastIndexOf(".");
        imgs[i].smallSrc=src;
        imgs[i].bigSrc= src.substr(0, index-1) + ".png";
        console.log(imgs[i].smallSrc,imgs[i].bigSrc)
    }
    console.log(imgs)
//鼠标进入小图片，则小图片换成大图片
    $(".king li").mouseenter(function () {
        console.log($(this))
        let currentItem=$(this).find('.small')
        console.log('currentItem',currentItem)
        currentItem=currentItem[0];
        currentItem.src=currentItem.bigSrc;
        console.log(currentItem.smallSrc,currentItem.bigSrc)
        $(this).animate({width: 224})
            .find('.small').removeClass('small').addClass("big")
            .fadeIn();
        5
        //其余图片都应该是小图片
       let smallImgs= $(this).siblings().animate({width:69 }).find('img').removeClass('big').addClass("small");
            console.log(smallImgs)
        for (let i = 0; i < smallImgs.length; i++) {
            let src=smallImgs[i].src;
            smallImgs[i].src=smallImgs[i].smallSrc;
            smallImgs.fadeIn();
        }

    })
})
</script>

<h1 style="color: #333333;text-align: center">农药上头</h1>
<hr>
<div class="king">
    <ul>
        <li >
            <a href="#">

                <img src="images/m1.jpg" alt="" class="small">
            </a>
        </li>
        <li>
            <a href="#">
                <img src="images/l1.jpg" alt="" class="small">

            </a>
        </li>
        <li>
            <a href="#">
                <img src="images/c1.jpg" alt="" class="small">

            </a>
        </li>
        <li>
            <a href="#">
                <img src="images/w1.jpg" alt="" class="small">

            </a>
        </li>
        <li>
            <a href="#">
                <img src="images/z1.jpg" alt="" class="small">

            </a>
        </li>
        <li>
            <a href="#">
                <img src="images/h1.jpg" alt="" class="small">

            </a>
        </li>
        <li>
            <a href="#">
                <img src="images/t1.jpg" alt="" class="small">

            </a>
        </li>
    </ul>

</div>




</body>

</html>